/**
 * 依赖说明:
 *  react:16.13.1
 *  react-dom:16.13.1
 *  echarts:4.9.0
 *  antd:3.26.15 
 */

import React, { Component } from 'react'
import echarts from 'echarts'
import { ConfigProvider, DatePicker } from 'antd'
import "./style.scss"
import locale from 'antd/lib/locale/zh_CN';

const { RangePicker } = DatePicker
interface IProps {

}
interface IStates {
    active: number,
    value: any
}

export default class SellTop10 extends Component<IProps, IStates> {
    private myChart: any
    // echart配置项
    private option: any = {
        // 表格标题
        title: {
            text: '生产量TOP10',
            textStyle: {
                fontWeight: 350
            }
        },
        grid:{
            bottom:30
        },
        // 提示框配置
        tooltip: {
            backgroundColor: "#fff",
            textStyle: {
                color: "#333"
            },
            formatter: '<div class="tooltip">{b}:{c}</div>',
            extraCssText: 'box-shadow: -1px -1px 3px 2px rgb(0, 0, 0, 0.3);'
        },
        // x轴数据配置
        xAxis: {
            axisTick: {
                alignWithLabel: true
            },
            // x轴-线配置
            axisLine: {
                lineStyle: {
                    color: "rgb(235,235,237)"
                }
            },
            // x轴—文本标签配置
            axisLabel: {
                color: "#333"
            },
        },
        // y轴数据配置
        yAxis: {
            splitLine: {
                show: false
            },
            // y轴-线配置
            axisLine: {
                lineStyle: {
                    color: "rgb(235,235,237)"
                }
            },
            // y轴—文本标签配置
            axisLabel: {
                color: "#333",
                interval: 0,
                // y轴数据自定义显示
                formatter: (value: string) => {
                    const v: number = Math.round(Number(value))
                    const l: number = v.toLocaleString().length
                    if (l > 4 && l < 11) {
                        return v / 1000 + "k"
                    } else if (l >= 11 && l <= 15) {
                        return v / 100000000 + "亿"
                    } else {
                        return value
                    }
                }
            },
        },
        // 数据区域配置
        series: [{
            name: '销量',
            type: 'bar',
            barWidth: "7px",
            showBackground: true,
            itemStyle: {
                color: "rgb(66,118,253)",
                barBorderRadius: [5, 5, 0, 0]
            },
            backgroundStyle: {
                barBorderRadius: [5, 5, 0, 0],
                color: "rgb(231,238,253)",
                borderWidth: 7
            },
        }]
    }
    constructor(props: IProps) {
        super(props)
        this.state = {
            active: 1,
            value: ""
        }
    }
    public componentDidMount() {
        const d = document.getElementById("sell-top-10-chart") as HTMLCanvasElement
        this.myChart = echarts.init(d)
        this.search(1)
        // 监听窗口尺寸变化，动态渲染表格大小
        window.addEventListener("resize", () => {
            this.myChart.resize()
        })
    }
    public componentWillUnmount() {
        // 组件卸载移除事件监听器
        window.removeEventListener("resize", () => { this.myChart.resize() })
    }
    // 用于网络请求数据
    public search = (num: number) => {
        if (num === 1) {
            this.option.xAxis.data = ["辣条", "蛋糕", "面包", "饺子", "汤圆", "面筋", "饼干", "罐头", "果粒橙", "可乐"]
            this.option.series[0].data = [145000, 130000, 136000, 140000, 105008, 20004, 20004, 20004, 20004, 20004]
        } else if (num === 2) {
            this.option.xAxis.data = ["辣条", "蛋糕", "面包", "饺子", "汤圆", "面筋", "饼干", "罐头", "果粒橙", "可乐"]
            this.option.series[0].data = [1854500, 2355000, 1760055, 1485500, 1902508, 1020004, 202004, 205004, 200044, 200043]
        }
        this.myChart.setOption(this.option)
    }
    // 按钮点击事件
    public dateClick = (num: number) => {
        this.setState({ active: num, value: "" }, () => {
            this.state.active === 1 ? this.search(1) : this.search(2)
        })
    }
    // 点击日期选择框事件
    public rangeChange = (date: any, dateStrings: string[]) => {
        this.setState({ active: 3, value: date })
    }
    public render() {
        const { active, value } = this.state
        return (
            <div className="sell-top-10-chart">
                <div className="bar-chart-header">
                    <div className="header-left">
                        <div className={active === 1 ? "active" : ""} onClick={() => { this.dateClick(1) }}>近7天</div>
                        <div className={active === 2 ? "active" : ""} onClick={() => { this.dateClick(2) }}>近30天</div>
                    </div>
                    <div>
                        <ConfigProvider locale={locale}>
                            <RangePicker
                                size="small"
                                onChange={this.rangeChange}
                                style={{ width: "200px" }}
                                value={value}></RangePicker>
                        </ConfigProvider>
                    </div>
                </div>
                <div className="chart-box">
                    <div id="sell-top-10-chart" className="bar-chart"></div>
                </div>
            </div>
        )
    }
}